<template>
  <div>
    <div class="video_head">
      <div>
        <el-input v-model="searchText"
                  placeholder="视频名称查询"> </el-input>
        <el-button type="success"
                   @click="search">查询</el-button>
      </div>
      <el-button type="primary"
                 icon="el-icon-plus"
                 v-if="!myflag"
                 @click="addVideo()">添加视频</el-button>
    </div>
    <el-dialog :title="diaTitle"
               :visible.sync="videoFlag">
      <el-form class="myform"
               label-width="100px">
        <input type="file"
               ref="myvideo"
               hidden
               accept="video/*"
               @change="upVideo">
        <el-form-item label="视频上传:">
          <el-input disabled
                    v-model="Vurl"></el-input>
          <el-button type="primary"
                     v-if="!ID"
                     @click="selVideo()">选择视频</el-button>
        </el-form-item>
        <el-form-item label="视频名称:">
          <el-input v-model="Vname"></el-input>
        </el-form-item>
        <el-form-item label="视频时长:">
          <el-input v-model="Vtime"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="success"
                   @click="addEdit">{{btnTxt}}</el-button>
        <el-button type="primary"
                   @click="cancelUp">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { upVideoApi, addVideoApi, editVideo } from '../../api/video'

export default {
  name: 'Ljfvue2011Videoform',
  inject: ["myflag"],
  data () {
    return {
      diaTitle: "添加视频",
      btnTxt: "确定",
      videoFlag: false,
      searchText: "",//搜索字段
      ID: "",// 视频id，添加时传空''	
      Vname: "", //视频名称	
      Vtime: "", //视频时长	
      Vurl: "", //视频地址
    };
  },
  beforeMount () { //接收兄弟组件传来的当前编辑数据
    this.$bus.$on("sendvideo", (row) => {
      this.diaTitle = "修改视频"
      this.btnTxt = "确认修改"
      this.videoFlag = true;
      this.Vurl = row.Vurl;
      this.Vname = row.Vname;
      this.Vtime = row.Vtime;
      this.ID = row.ID;
    })
  },
  mounted () {

  },
  methods: {
    search () { //查询方法
      this.$parent.getVideo(1, this.searchText)
      this.searchText = ""
    },
    async upVideo () {  //上传视频
      var formdata = new FormData();
      var files = this.$refs.myvideo.files[0];
      //限制上传视频的大小  100mb
      if (files.size / 1024 / 1024 > 100) {
        this.$message({
          message: "上传的视频过大",
          type: "danger"
        })
      } else {
        // 1bit  比特
        // 1Byte--8bit    字节
        // 1024b---1kb 
        // 1024kb---1Mb 
        // 1024Mb---1Gb
        console.log(files)
        formdata.append(new Date().getTime().toString(), files)
        var res = await upVideoApi(formdata)
        console.log(res)
        // 后台返回的视频路径
        this.Vurl = res.data.cacheName;
        this.$refs.myvideo.value = "";
      }
    },
    clearDia () {
      this.Vname = "";
      this.Vtime = "";
      this.Vurl = "";
      this.videoFlag = false;
      this.diaTitle = "添加视频";
      this.btnTxt = "确认"
      this.ID = ""
    },
    async addEdit () { //添加视频和修改视频

      if (!this.ID) { //添加视频
        if (this.Vurl) { //视频上传后
          var res = await addVideoApi({
            Vname: this.Vname,
            Vtime: this.Vtime,
            Vurl: this.Vurl
          })
          console.log(res)
          if (res.data.success) {
            this.$message({
              message: "视频添加成功"
            })
          }
        } else {
          this.$message.error("请先选择视频")
        }

      } else { //修改视频
        var editRes = await editVideo({
          ID: this.ID,
          Vname: this.Vname,
          Vtime: this.Vtime,
          Vurl: this.Vurl
        })
        if (editRes.data.success) {
          this.$message({
            message: "视频修改成功"
          })
        }

      }
      this.clearDia();//清空输入框
      // 触发父组件的渲染列表
      this.$parent.getVideo(1)

    },
    selVideo () { //点击选择视频
      this.$refs.myvideo.click();
    },
    cancelUp () {
      this.videoFlag = false;
    },
    addVideo () { //点击添加视频
      this.videoFlag = true;
    }
  },
};
</script>

<style lang="less" scoped>
.video_head {
  height: 90px;
  background: black;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  div {
    display: flex;
  }
  .el-button {
    height: 40px;
    margin-left: 20px;
    margin-right: 20px;
  }
}
.myform {
  .el-input {
    width: 400px;
    margin-right: 20px;
  }
}
</style>